﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CS_AspNetWebForms_JsSdk.Facebook.Default" %>

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
    <title>Facebook C# SDK ASP.NET WebForms with Facebook JavaScript SDK</title>
    <link type="text/css" href="../Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css"
        rel="stylesheet" />
    <script type="text/javascript" src="../Scripts/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="../Scripts/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="../Scripts/js/jquery-ui-sliderAccess.js"></script>
    <script>
        $(document).ready(function () {
            $('#datepicker').datetimepicker();
            $('#timepicker').timepicker({
                hourGrid: 4,
                minuteGrid: 10
            });
        });
    </script>
    <style type="text/css">
        .style5
        {
            width: 90px;
        }
        .style6
        {
            width: 423px;
        }
        
        #container
        {
            display: table;
        }
        
        #row
        {
            display: table-row;
        }
        
        #left, #right, #middle
        {
            display: table-cell;
        }
    </style>
    <style type="text/css">
        #ui-datepicker-div, .ui-datepicker
        {
            font-size: 80%;
        }
        /* css for timepicker */.ui-timepicker-div .ui-widget-header
        {
            margin-bottom: 8px;
        }
        .ui-timepicker-div dl
        {
            text-align: left;
        }
        .ui-timepicker-div dl dt
        {
            height: 25px;
            margin-bottom: -25px;
        }
        .ui-timepicker-div dl dd
        {
            margin: 0 10px 10px 65px;
        }
        .ui-timepicker-div td
        {
            font-size: 90%;
        }
        .ui-tpicker-grid-label
        {
            background: none;
            border: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="fblogout" value="Logout from Facebook" disabled="disabled" />
    <h1>
        Facebook Poster</h1>
    <p>
        Facebook Poster is a program that you can easily post message to all your friends
        at the sametime.
    </p>
    <strong>
        <asp:Label runat="server" ID="lblName"></asp:Label>
    </strong>
    <br />
    <asp:Image runat="server" ID="imgProfilePic" />
    
    <div style="width: 600px;">
        <div>
            <div style="float: left; width: 50%;">
                Cell 1</div>
            <div style="float: left; width: 50%;">
                Cell 2</div>
        </div>
        <div style="clear: both;">
            <div style="float: left; width: 50%;">
                Cell 3</div>
            <div style="float: left; width: 50%;">
                Cell 4</div>
        </div>
        <div style="clear: both;">
            <div style="float: left; width: 50%;">
                Cell 5</div>
            <div style="float: left; width: 50%;">
                Cell 6</div>
        </div>
    </div>
    
    <div id="container">
        <div id="row">
            <div id="left">
                <h4>
                    Left Col</h4>
                <p>
                    ...</p>
            </div>
            <div id="middle">
                <h4>
                    Middle Col</h4>
                <p>
                    ...</p>
            </div>
            <div id="right">
                <h4>
                    Right Col</h4>
                <p>
                    ...</p>
            </div>
        </div>
    </div>
    <table>
        <tr>
            <td class="style5">
                First Name:
            </td>
            <td class="style6">
                <asp:Label runat="server" ID="lblFirstName" />
            </td>
        </tr>
        <tr>
            <td class="style5">
                Last Name:
            </td>
            <td class="style6">
                <asp:Label runat="server" ID="lblLastName" />
            </td>
        </tr>
        <tr>
            <td class="style5">
                Pages:
            </td>
            <td class="style6">
                <asp:ListBox ID="lbPages" runat="server" Height="140px" SelectionMode="Multiple"
                    Width="420px"></asp:ListBox>
            </td>
        </tr>
        <tr>
            <td class="style5">
                <asp:Label runat="server" AssociatedControlID="txtMessage" ID="Label4">Name:</asp:Label>
            </td>
            <td class="style6">
                <asp:TextBox ID="txtName" runat="server" Width="420px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style5">
                <asp:Label runat="server" AssociatedControlID="txtMessage" ID="Label2">Link:</asp:Label>
            </td>
            <td class="style6">
                <asp:TextBox ID="txtCaption" runat="server" Width="420px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style5">
                <asp:Label runat="server" AssociatedControlID="txtMessage" ID="Label3">Description:</asp:Label>
            </td>
            <td class="style6">
                <asp:TextBox ID="txtDescription" runat="server" Width="420px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style5">
                <asp:Label runat="server" AssociatedControlID="txtMessage" ID="Label1">Message: </asp:Label>
            </td>
            <td class="style6">
                <asp:TextBox runat="server" ID="txtMessage" TextMode="MultiLine" Height="90px" Width="420px" />
            </td>
        </tr>
        <tr>
            <td class="style5">
                &nbsp;
            </td>
            <td class="style6">
                <div class="demo">
                    <asp:TextBox ID="datepicker" runat="server" Width="151px"></asp:TextBox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:TextBox ID="timepicker" runat="server" Width="51px"></asp:TextBox>
                </div>
            </td>
        </tr>
        <tr>
            <td class="style5">
                &nbsp;
            </td>
            <td class="style6">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style5">
                &nbsp;
            </td>
            <td class="style6">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style5">
                <asp:Button runat="server" Text="Post to Wall" ID="btnPostToWall" OnClick="btnPostToWall_Click"
                    Width="110px" />
            </td>
            <td class="style6">
                <asp:Label runat="server" ID="lblPostMessageResult" EnableViewState="false" />
            </td>
        </tr>
        <tr>
            <td class="style5">
                <asp:Button runat="server" Text="Save" ID="btnSave" OnClick="btnSave_Click" Width="110px" />
            </td>
            <td class="style6">
                <asp:Label runat="server" ID="lblPostMessageResult1" EnableViewState="False" />
            </td>
        </tr>
    </table>
    <br />
    <div id="fb-root">
    </div>
    <script>
        window.fbAsyncInit = function () {
            FB.init({
                appId: '<%: Facebook.FacebookApplication.Current.AppId %>',
                cookie: true,
                xfbml: true,
                oauth: true
            });

            function facebooklogout() {
                FB.logout(function (response) {
                    // user is now logged out
                    window.location.reload();
                });
            };

            $(function () {
                // make the button is only enabled after the facebook js sdk has been loaded.
                $('#fblogout').attr('disabled', false).click(facebooklogout);
            });
        };
        (function () {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        } ());
            
    </script>
    </form>
</body>
</html>
